<template>
    <div id="total">
        <van-nav-bar title="商品信息" left-arrow @click-left="onClickLeft" />
        <div class="bottom">
            <dl>
                <dt><img :src='goods.picture'>
                </dt>
                <dd>
                    <p class="price">￥{{ goods.price }}</p>
                    <div>
                        <p>距离本场结束还有</p>
                        <van-count-down :time="time">
                            <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </div>
                </dd>
            </dl>
            <div class="name">
                <p class="first">{{ goods.product }}</p>
                <p class="second">提货时间：02月07日</p>
            </div>
            <div class="empty"></div>
            <div class="describe">
                <h3>商品详情</h3>
                <div>
                    <p><span>商品名称</span><span class="long">{{ goods.product }}</span></p>
                    <p><span>商品编号</span><span class="long">{{ goods.id }}</span></p>
                    <p><span>上架时间</span><span class="long">2022-02-08</span></p>
                    <p><span>类型</span><span class="long">{{ goods.shop }}</span></p>
                </div>
                <h4>图文详情</h4>
                <p>{{ goods.detail }}</p>
                <img :src="item" v-for="item in goods.list">
            </div>
            <div class="guide">
                <h3>吃喝玩乐指南</h3>
                <van-steps direction="vertical" :active="4" active-color='pink'>
                    <van-step>
                        <h3>在线下单</h3>
                        <p>每天可购买商品时间:00: 00-23: 00</p>
                    </van-step>
                    <van-step>
                        <h3>物流配送</h3>
                        <p>每天16:00之前,物流会将您昨日购买的商品配送到您购买选择的自提门店</p>
                    </van-step>
                    <van-step>
                        <h3>门店自提</h3>
                        <p>每天可提取商品时间:08: 30-22: 00</p>
                    </van-step>
                    <van-step>
                        <h3>售后无忧</h3>
                        <p>本店铺提供优质的售后服务</p>
                    </van-step>
                    <van-step>
                        <h3>吃喝玩乐热线</h3>
                        <p>如果你遇到问题，请致电吃喝玩乐帮忙热线!电话:747494110</p>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="share-o" text="分享" @click="showShare = true" />
            <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="goCart" />
            <van-action-bar-button color="rgb(251,171,7)" type="danger" text="加入购物车" @click.stop="useCart.saveCart(goods);Toast('添加成功')" />
            <van-action-bar-button color="rgb(246,57,13)" type="danger" text="立即购买" @click="goCheckpay();usetDetail.changePrice(goods)" />
        </van-action-bar>
    </div>
</template>

<script setup lang="ts">
import { NavBar } from 'vant';
import { CountDown } from 'vant';
import { Toast } from 'vant';
import { Step, Steps } from 'vant';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
import { useDetail } from "@/hooks/detail"
import { ref } from 'vue';
import { ShareSheet } from 'vant';
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cart'
import { useDetailStore } from '@/stores/detail'


const { goods } = useDetail();
const router = useRouter();
const time = ref(1 * 60 * 60 * 1000);
const useCart = useCartStore();
const usetDetail = useDetailStore();

const onClickLeft = () => history.back();//返回上一级
const goCart = () =>{//跳转购物车
    router.push({path:'/cart'})
}
const showShare = ref(false);
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];
const goCheckpay = () =>{
    router.push({path:'/checkpay',query: { goods }})
}
</script>

<style lang="scss" scoped >
#total {
    .van-nav-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .bottom {
        margin-top: 30px;

        dl {
            dt {
                width: 100%;

                img {
                    width: 100%;
                }
            }

            dd {
                position: absolute;
                top: 407px;
                left: -40px;

                .price {
                    font-size: 24px;
                }

                width: 100%;
                display: flex;
                justify-content: space-around;
                background-color: rgb(236, 13, 13);
                color: #fff;

                .van-count-down {
                    border-radius: 8px;
                    background-color: #fff;
                    padding-left: 18px;

                    .colon {
                        display: inline-block;
                        margin: 0 4px;
                        color: #ee0a24;
                    }

                    .block {
                        display: inline-block;
                        width: 22px;
                        color: #ee0a24;
                        font-size: 18px;
                        text-align: center;
                    }
                }

            }
        }

        .name {
            margin-top: 104px;
            height: 100px;
            padding-left: 20px;

            .first {
                height: 60%;
                font-size: 18px;
                font-family: 'Courier New', Courier, monospace;
            }
            .second{
                font-size: 14px;
            }
        }

        .empty {
            width: 100%;
            height: 10px;
            background-color: rgb(240, 240, 240);
        }

        .describe {
            h3 {
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 20px;
            }

            div {
                width: 90%;
                background-color: rgb(254, 216, 217);
                margin-left: 5%;
                border-radius: 8px;
                height: 280px;
                display: flex;
                flex-direction: column;
                align-content: space-around;

                p {
                    font-size: 16px;
                    margin-left: 10px;
                    height: 70px;
                    display: flex;

                    span {
                        display: block;
                        width: 100px;
                    }

                    .long {
                        width: 220px;
                    }
                }
            }

            h4 {
                text-align: center;
            }
            p{
                font-size: 16px;
                padding-left: 10px;
                padding-right: 10px;
            }
            img {
                width: 100%;
                height: 280px;
            }
        }

        .guide {
            margin-bottom: 80px;
            h3 {
                text-align: center;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>